<script lang="ts" setup>
import {Search} from "@element-plus/icons-vue";
import {onBeforeMount, ref} from "vue";
import type {Ref} from "vue";
import type {PageSubscribeRequest, SubscribeResponse} from "@/api/subscribe";
import {pageSubscribe} from "@/api/subscribe";

const subscribeData: Ref<SubscribeResponse[]> = ref([])
const pageSubscribeRequest: Ref<PageSubscribeRequest> = ref({
  pageIndex: 1,
  pageSize: 10
})
const total: Ref<number> = ref(0)

onBeforeMount(() => {
  pageSubscribeData();
})

function pageSubscribeData(): void {
  pageSubscribe(pageSubscribeRequest.value).then(res => {
    total.value = Number(res.data.total);
    subscribeData.value = res.data.body;
  })
}

function currentChange(value: number): void {
  pageSubscribeRequest.value.pageIndex = value
  pageSubscribeData()
}
</script>

<template>
  <el-row>
    <el-input v-model="pageSubscribeRequest.clientId" placeholder="客户端 id" clearable/>
    <el-button type="primary" :icon="Search" @click="pageSubscribeData">搜索</el-button>
  </el-row>
  <el-table max-height="60vh" :data="subscribeData" empty-text="暂无数据">
    <el-table-column min-width="100px" prop="clientId" label="客户端 id"/>
    <el-table-column min-width="100px" prop="topic" label="主题"/>
    <el-table-column min-width="100px" prop="qos" label="qos"/>
  </el-table>
  <el-pagination layout="prev, pager, next" :page-size="pageSubscribeRequest.pageSize" :total="total"
                 :current-page="pageSubscribeRequest.pageIndex" @current-change="currentChange" hide-on-single-page/>
</template>

<style scoped>
.el-input {
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.el-table {
  width: 100%;
  margin-top: 10px;
}

.el-pagination {
  margin-top: 20px;
}
</style>